<script lang="ts" setup>
import { getIcon } from "@/api/assets/assets";
import { onMounted, ref } from "vue";
// 核对信息按钮事件
const checkInfo = () => {

};

// 下载证书按钮事件
const downloadCertificate = () => {

};
// 定义图片变量
const img = ref<string | undefined>(undefined);
const fetchIcon = async () => {
  try {
    const data = await getIcon(['trainingCamp2.png'])
    img.value = data['trainingCamp2.png']
  }
  catch (error) {
    console.error('API 调用错误:', error)
  }
}

onMounted(() => {
  fetchIcon()
})
</script>

<template>
  <div class="submission-card">
    <!-- 左侧图片 -->
    <img :src="img" alt="作业图片" class="submission-image">

    <!-- 右侧内容 -->
    <div class="submission-content">
      <!-- 标题 -->
      <h2 class="submission-title">
        结营证书
      </h2>

      <!-- 下载证书描述 -->
      <p class="submission-description">
        请在电脑端下载证书！
      </p>
    </div>
  </div>
</template>

<style scoped lang="scss">
.submission-card {
  display: flex; /* 设置为水平排列 */
  align-items: flex-start; /* 垂直方向上顶部对齐 */
  padding: 1.5rem;
  border: 1px solid #e0e0e0; /* 边框 */
  border-radius: 12px; /* 圆角 */
  background-color: #fff;
  width: 100%;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 添加阴影效果 */
}

.submission-image {
  width: 9vw; /* 使用相对视口宽度的单位 vw 来控制图片宽度 */
  height: 9vw; /* 使用相对视口宽度的单位 vw 来控制图片高度，确保宽高一致 */
  object-fit: cover; /* 保持图片比例，不变形 */
  border-radius: 8px; /* 圆角 */
  margin-right: 1.5rem; /* 图片与右侧内容的间距，使用 rem 单位 */
}

.submission-content {
  flex: 1; /* 右侧内容占据剩余宽度 */
  display: flex;
  flex-direction: column;
}

.submission-title {
  font-size: 1.5rem; /* 标题字号 */
  font-weight: bold;
  margin-bottom: 1rem; /* 标题与描述的间距 */
}

.submission-description {
  font-size: 1rem; /* 描述字号 */
  color: #666;
  line-height: 1.5; /* 增加行高，提升可读性 */
  margin-bottom: 1.5rem; /* 描述与提交状态的间距 */
}

.submission-status {
  display: flex;
  align-items: center;
  margin-bottom: 1.5rem; /* 提交状态与按钮之间的间距 */
  font-size: 0.875rem;
  color: #999;
}

.status-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #d9d9d9; /* 状态点的颜色 */
  margin-right: 0.5rem; /* 状态点与文本之间的间距 */
}
</style>
